<template>
	<view class="container">
		<view class="job-title">
			{{info.name}}
		</view>
		<view class="job-price">
			{{info.salary}}
		</view>
		<view class="job-address">
			<image src="/static/images/job/address.png" mode="widthFix" style="width: 30rpx;margin-right: 4rpx;">
			</image>{{info.address}}
		</view>
		<view class="job-require">
			<view class="job-require-item">
				<image src="/static/images/job/experience.png" mode="widthFix" style="width: 26rpx;margin-right: 4rpx;">
				</image> {{info.experience}}
			</view>
			<view class="job-require-item">
				<image src="/static/images/job/edu.png" mode="widthFix" style="width: 28rpx;margin-right: 4rpx;">
				</image>
				{{info.educational}}
			</view>
			<view class="job-require-item">
				<image src="/static/images/job/old.png" mode="widthFix" style="width: 25rpx;margin-right: 4rpx;">
				</image>
				{{info.age}}
			</view>
		</view>
		<view class="title">
			职位详情
		</view>
		<view class="job-tag">
			<view class="job-tag-item" v-for="(item,index) of info.tag" :key="index">
				{{item}}
			</view>
		</view>
		<view class="content">
			
			<text>
				{{info.des}}
			</text>
			<!-- <view class="content-title">
				岗位职责:
			</view>
			<text class="content-text">
				1、负责业主家庭卫生清洁工作；
				2、负责家庭用餐的食材采购、做饭等工作；
			</text> -->
		</view>
		<!-- <view class="content">
			<view class="content-title">
				任职资格:
			</view>
			<text class="content-text">
				1、负责业主家庭卫生清洁工作；
				2、负责家庭用餐的食材采购、做饭等工作；
			</text>
		</view>
		<view class="content">
			<view class="content-title">
				福利待遇:
			</view>
			<text class="content-text">
				1、负责业主家庭卫生清洁工作；
				2、负责家庭用餐的食材采购、做饭等工作；
			</text>
		</view> -->
		<u-divider :hairline="true"></u-divider>
		<template v-if="user_info.role_type == 'role_normal'">
			<view class="title">
				个人信息
			</view>
			<view class="info" >
				<view class="info-row">
					<view class="info-label">
						姓名:
					</view>
					<view class="info-content">
						<view class="info-content-name">
							{{user_info.name}}
						</view>
						<view class="info-content-active">
							已认证
						</view>
					</view>
				</view>
				<view class="info-row">
					<view class="info-label">
						地址:
					</view>
					<view class="info-content">
						<view class="info-content-text">
							{{user_info.address}}
						</view>
						<view class="info-icon">
							<image src="/static/images/job/arrow-right.png" mode="widthFix" style="width: 30rpx;"></image>
						</view>
					</view>
				</view>
			</view>
		</template>
		<template v-if="user_info.role_type == 'role_comp'">
			<view class="title">
				公司信息
			</view>
			<view class="info" >
				<view class="info-row">
					<view class="info-label">
						公司名称:
					</view>
					<view class="info-content">
						<view class="info-content-name">
							{{user_info.comp_name}}
						</view>
						<view class="info-content-active">
							已认证
						</view>
					</view>
				</view>
				<view class="info-row">
					<view class="info-label">
						地址:
					</view>
					<view class="info-content">
						<view class="info-content-text">
							{{user_info.address}}
						</view>
						<view class="info-icon">
							<image src="/static/images/job/arrow-right.png" mode="widthFix" style="width: 30rpx;"></image>
						</view>
					</view>
				</view>
			</view>
		</template>
		<template>
			<view></view>
		</template>
		<template v-if="comment_info.total">
			<u-divider :hairline="true"></u-divider>
			<view class="title">
				<view class="">
					评价 <text style="font-size: 30rpx;">({{comment_info.total}}条)</text>
				</view>
				<image src="/static/images/job/arrow-right.png" mode="widthFix" style="width: 30rpx;" @click="toMoreComment"></image>
			</view>
			<view class="" v-for="(item,index) of comment_info.list" :key="index">
				<commentItemComponent :info="item"></commentItemComponent>
				<u-divider :hairline="true"></u-divider>
			</view>
		</template>
		
		<bottomComponent>
			<view class="bottom">
				<view class="" @click="collectHandler">
					<image src="/static/images/job/collection.png" mode="widthFix" style="width: 65rpx;"
						v-if="collectInfo.id == 0 || collectInfo.id === undefined"></image> 
					<image src="/static/images/job/collection_active.png" mode="widthFix" style="width: 65rpx;" v-else>
					</image>
				</view>
				<view class="bottom-btn" @click="callPhone">
					拨打电话
				</view>
			</view>
		</bottomComponent>
		<popLoginComponet ref="login"></popLoginComponet>
	</view>
</template>

<script>
	import commentItemComponent from "@/components/commentItemComponent/index.vue"
	import bottomComponent from "@/components/bottomComponent/index.vue"
	import popLoginComponet from "@/components/popLoginComponent/index.vue"
	import {
		getTaskDetail
	} from "@/api/task.js"
	import {
		addCollect,
		detailCollect,
		removeCollect
	} from "@/api/collect.js"
	import {
		roleDetailByUserIdAndRoleType
	} from "@/api/role.js"
	import {
		addComment,
		getCommentPageByTask
	} from "@/api/comment.js"
	export default {
		components: {
			commentItemComponent,
			bottomComponent,
			popLoginComponet
		},
		data() {
			return {
				info: {},
				collectInfo: {},
				task_id: '',
				user_info: {},
				comment_info: {
					total: 0,
					list: []
				}
			}
		},
		onShow() {
			this.getCollectInfo()
			this.getComment()
		},
		onLoad(e) {
			const {
				task_id,
				name
			} = e
			this.task_id = task_id
			if (name) {
				uni.setNavigationBarTitle({
					title: name
				})
			}
			if (task_id) {
				getTaskDetail({
						task_id
					})
					.then(res => {
						console.log(res)
						const data = res || {}
						try {
							data.tag = JSON.parse(data.tag)
						} catch (e) {
							data.tag = []
						}
						this.info = data
						roleDetailByUserIdAndRoleType({
							user_id: data.created_by,
							role_type: data.role_type
						})
						.then(res => {
							this.user_info = res
						})
					})
			}
		},

		methods: {
			toMoreComment(){
				uni.navigateTo({
					url: "/pages/task_comment_page/index?task_id="+this.task_id
				})
			},
			//获取评价列表
			getComment(){
				getCommentPageByTask({
					task_id: this.task_id,
					page_number: 1,
					page_size: 3,
				})
				.then(res => {
					res.list = (res.list || []).map(item => {
						try{
							item.file = JSON.parse(item.file)
						}catch(e){
							item.file = []
						}
						return item
					})
					this.comment_info = res
				})
			},
			validateLogin() {
				return this.$refs.login.validaLogin()
			},
			//查询收藏信息
			getCollectInfo() {
				if (this.$refs.login.isLogin()) {
					detailCollect({
						task_id: this.task_id,
					}).then(res => {
						this.collectInfo = res || {}
					})
				}

			},
			//收藏或取消收藏
			async collectHandler() {
				await this.validateLogin()
				if (this.collectInfo.id) {
					//取消收藏
					removeCollect({
							id: this.collectInfo.id + ""
						})
						.then(res => {
							uni.showToast({
								title: "已取消收藏",
								icon: "none",
								complete: () => {
									this.getCollectInfo()
								}
							})
						})
				} else {
					//收藏
					addCollect({
							task_id: this.task_id + ""
						})
						.then(res => {
							uni.showToast({
								title: "收藏成功",
								icon: "none",
								complete: () => {
									this.getCollectInfo()
								}
							})
						})
				}
			},
			//拨打电话
			async callPhone() {
				await this.validateLogin()
				addComment({
					task_id: this.task_id
				})
				if (!this.info.phone) {
					uni.showToast({
						title: "发布者未填写手机号",
						icon: "none"
					})
					return
				}
				wx.makePhoneCall({
					phoneNumber: this.info.phone
				})
			},
		}
	}
</script>

<style>
	page {
		background: #649CF6 linear-gradient(360deg, #fff 0%, #ECF3FF 60%, #F1F6FF 96%, #F1F6FF 100%);
		padding-bottom: 100rpx;
	}
</style>
<style scoped lang="scss">
	.container {
		width: 730rpx;
		margin: 20rpx auto 160rpx;
		border-radius: 6rpx;
		box-sizing: border-box;
		padding: 26rpx 26rpx 26rpx;
		background-color: #fff;

		.job-title {
			font-weight: bold;
			font-size: 34rpx;
			color: #000000;
			line-height: 52rpx;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.job-price {
			margin: 10rpx 0;
			font-weight: bold;
			font-size: 31rpx;
			color: #005DFF;
			line-height: 46rpx;
		}

		.job-address {
			margin: 10rpx 0;
			font-weight: 500;
			font-size: 23rpx;
			color: #9E9E9E;
			line-height: 34rpx;
			display: flex;
		}

		.job-require {

			display: flex;
			align-items: center;

			.job-require-item {
				font-weight: 500;
				font-size: 23rpx;
				color: #9E9E9E;
				line-height: 34rpx;
				display: flex;
				align-items: center;
			}

			.job-require-item+.job-require-item {
				margin-left: 30rpx;
			}
		}

		.title {
			margin: 20rpx 0;
			font-weight: bold;
			font-size: 34rpx;
			color: #000000;
			line-height: 52rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.job-tag {
			margin: 10rpx 0;
			display: flex;
			align-items: center;

			.job-tag-item {
				padding: 0 16rpx;
				background-color: #E9F1FF;
				line-height: 40rpx;
				font-size: 24rpx;
				color: #005DFF;
				text-align: center;
				border-radius: 46rpx;
			}

			.job-tag-item+.job-tag-item {
				margin-left: 12rpx;
			}
		}

		.content {
			margin: 20rpx 0;
			font-weight: 400;
			font-size: 29rpx;
			color: #3F3F3F;
			line-height: 44rpx;
		}

		.info {
			margin: 20rpx 0;
			font-weight: 400;
			font-size: 29rpx;
			color: #3F3F3F;
			line-height: 44rpx;

			.info-row {
				display: flex;

				.info-label {
					margin-right: 10rpx;
				}

				.info-content {
					flex: 1;
					display: flex;
					align-items: center;

					.info-content-text {
						flex: 1;
						padding-right: 20rpx;
					}

					.info-content-active {
						margin-left: 20rpx;
						padding: 0 20rpx;
						line-height: 34rpx;
						background: #E9F1FF;
						border-radius: 34rpx;
						color: #005DFF;
						font-size: 23rpx;
					}
				}
			}
		}

		.bottom {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.bottom-btn {
				width: 527rpx;
				line-height: 86rpx;
				background: #2B5BF8;
				border-radius: 86rpx;

				font-weight: 500;
				font-size: 38rpx;
				color: #FFFFFF;
				text-align: center;
			}
		}
	}
</style>